<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>心猜</title>
	<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_474420_m7h6zqvpkj2d42t9.css">
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<script type="text/javascript" src="js/fontSize.js"></script>
	<script type="text/javascript" src="js/layer/layer.js"></script>
	<script type="text/javascript" src="js/zepto.min.js"></script>
	<script type="text/javascript" src="js/vue.js"></script>
	<script type="text/javascript" src="js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="js/config.js"></script>
	<style type="text/css">
	    body{background: #f4f4f4;}
		.nav{height:.85rem;line-height: .85rem;background: #fb597b;position: fixed;top: 0;left: 0;width: 100%;z-index: 100;white-space: nowrap; overflow: scroll;}
		.flex{display:-webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}
		.liFlex{-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
		.nav li{text-align: center;height:.85rem;display: inline-block;}
		.flex li{-webkit-box-flex: 1;-webkit-flex: 1;-ms-flex: 1;flex: 1;}
		.scrollLi li{width: 24%;}
		.nav li span{color:rgba(255, 255, 255, 0.74);font-size: .28rem;display: inline-block;height: 91%;}
		.nav li.active span{border-bottom: 3px solid #fff;font-size: .32rem;font-weight: bold;color: #fff;}
		.content{margin-top: .85rem;}
		
	
	</style>
</head>
<body class="paddingBottom bgcolor index">
    <div id="app">
		<!-- <ul class="nav" :class="Category.length>3?'scrollLi':'flex'">
		 	<li class="active" @click="getList"><span>推荐</span></li>
		 	<li v-for="(item,index) in Category" @click="getCategoryList(item.id,index)" :class="item.selected?'active':''" ><span>{{item.name}}</span></li>
		</ul>	 -->
		<div>
			<ul>
				<li class="list" v-for="item in list" @click="goDetail(item.id)" v-if="item.isEnd==0">
					<div class="img_div">
					   <img :src="item.url" alt="" class="list_img">
                       <span class="time">{{item.str}}</span>
	                   
					    <div class="icon_prises">
					          <!-- 参与 -->
					         <img src="img/p_59.png" class="icon_prise" v-if="item.before==1"/>  
					         <img src="img/p_22.png" class="icon_prise" v-if="item.answered==1&&item.can_answer==1&&item.isEnd==0" />  
					         <img src="img/p_23.png" class="icon_prise" v-if="item.before==0&&item.can_answer==0" />  
					          <!-- 参与 end-->
					    </div>    
					</div>
					<div class="list_desc">{{item.title}}</div>
					<div class="list_bottom">
				      <img  src="img/p_1.png" class="icon_img" />
				      <span class="zhunfa">{{item.count}}</span> 
				      <img  src="img/p_2.png" class="icon_img" />
				      <span class="comonts">{{item.commentCount}}</span>       
				    </div>
				</li>
				<li class="list"  @click.stop="goArtical(item.id)" v-else>
					<div class="img_div">
					    <img :src="item.url" alt="" class="list_img">
	                    <div class="bottom_tip">
					        <span class="tip">恭喜你获得：{{item.award}}</span>  
					        <div class="look_tip">
					           查看详情
					            <img src="img/p_44.png" class="icon_right" />
					        </div>
					    </div>  
					    <div class="icon_prises">
					          <!-- 参与 -->
					         <img src="img/p_59.png" class="icon_prise" v-if="item.before==1"/>  
					         <img src="img/p_22.png" class="icon_prise" v-if="item.answered==1&&item.can_answer==1" />  
					         <img src="img/p_23.png" class="icon_prise" v-if="item.before==0&&item.can_answer==0" />  
					          <!-- 参与 end-->
					    </div>    
					</div>
					<div class="list_desc">{{item.title}}</div>
					<div class="list_bottom">
				      <img  src="img/p_1.png" class="icon_img" />
				      <span class="zhunfa">{{item.count}}</span> 
				      <img  src="img/p_2.png" class="icon_img" />
				      <span class="comonts">{{item.commentCount}}</span>       
				    </div>
				</li>
			</ul>
		</div>
		<ul class="nav_footer borderTop">
			<li data-href="index.html" class="active">
				<ul>
					<li>
						 <i class="iconfont icon-zhongjiangjilu- no_activeIcon"></i>
						 <i class="iconfont icon-zhongjiangjilu-1 activeIcon"></i>
					</li>
					<li>竞猜</li>
				</ul>
			</li>
			<li data-href="shop.html">
				<ul>
					<li>
						<i class="iconfont icon-shangcheng- no_activeIcon"></i>
						<i class="iconfont icon-shangcheng-1 activeIcon"></i>
					</li>
					<li>商城</li>
				</ul>
			</li>
			<li data-href="person_center.html">
				<ul>
					<li>
						<i class="iconfont icon-gerenzhongxin- no_activeIcon"></i>
						<i class="iconfont icon-gerenzhongxin-1 activeIcon"></i>
					</li>
					<li>我的</li>
				</ul>
			</li>
		</ul>
		 <!-- <div class="lookmore">查看更多</div> -->
        <!-- <div class="nomore" v-else>没有更多了~</div> -->
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
			    list:[],
		        unionid:GetQueryString("unionid"),
		        token:GetQueryString("token"),
		        info:{},
		        now_mic_time:0,
		        Category:[],
		        isend:0,
		        from:0,
		        type:0
			},
			mounted(){
			    hideMenu();
		        this.getCount("index");
		        // this.getInfo();
		        this.getList(this.from);
		        // this.getCategory();
			},
			methods: {
			    goDetail:function(id){
			        window.location.href="questions.html?id="+id+"&unionid="+this.unionid+"&token="+this.token
			    },
			    lookmore:function(){
			    	if(this.type==0){
                           
			    	}

			    },
			    goArtical:function(id){
			    
			        window.location.href="list.html?id="+id+"&unionid="+this.unionid
			    },
			    getCount:function(str){
			      ajaxFun("POST","/share_count",{
			      	  route:str
			      },function(data){
                        
			      });
			    },
			    getInfo:function(){
			        var that=this;
			        ajaxFun1("POST","/get_guess_info",{
				      	
			      	},function(data){
			      		var res=data;
			            if(res.code==1){
			               that.unionid=res.data.info.unionid; 
			               that.info = res.data.info; 
			               that.loginWx();
			              
			             
			            }else{
			               showLayer(res.message);
			            }
                        
			        });
			    },
			    loginWx:function(){
			        var that=this;
			        ajaxFun("POST","/login_wx",{
			        	unionid:this.info.unionid,
			            openid:this.info.openid,
			            sex:this.info.sex,
			            headimgurl:this.info.headimgurl,
			            nickname:this.info.nickname
				      	
			      	},function(data){
			            var res=data;
			            if(res.code==1){
			               that.getList(this.from);
			               that.getCategory();
			            }else{
			            	showLayer(res.message);
			            }
                        
			        });
			    },
			    getStr(res){
			    	var that=this;
			        that.now_mic_time=res.now_mic_time;
	                for (var i = 0; i < res.data.list.length; i++) {
	                  var time=getTime(res.data.list[i].begin_time_date);
	                  var time1=getTime(res.data.list[i].e_time_date);
	                  var time2=getTime(res.data.list[i].expire_date);
	                  if(res.now_mic_time<time){
	                     var phase=time-res.now_mic_time;
	                     res.data.list[i].str="距离开始："+getDay(phase)+"天"+getHour(phase)+"时"+getMiute(phase)+"分";
	                     res.data.list[i].before=1;
	                  }else if(time<res.now_mic_time&&res.now_mic_time<time1){
	                      var phase1=time1-res.now_mic_time;
	                      res.data.list[i].str="距离答题结束："+getDay(phase1)+"天"+getHour(phase1)+"时"+getMiute(phase1)+"分";
	                      res.data.list[i].before=0;

	                  }else if(res.now_mic_time>time1&&res.now_mic_time<time2){
	                      var phase2=time2-res.now_mic_time;
	                      res.data.list[i].before=0;
	                      res.data.list[i].str="距离活动结束："+getDay(phase2)+"天"+getHour(phase2)+"时"+getMiute(phase2)+"分";
	                  }else{
	                      res.data.list[i].before=0;
	                      res.data.list[i].str="竞猜时间："+res.data.list[i].begin_time_str+"-"+res.data.list[i].expire_str;
	                  }
	                } 
	              return res.data.list;

			    },
			    getList:function(from){
			        var that=this;
			        ajaxFun("POST","/get_question_recommend",{
			        	unionid:this.unionid,
			        	from:0,
                        length:40
			      	},function(data){
			            var res=data;
			             $(".nav li").eq(0).addClass('active');
			             $(".nav li").eq(1).removeClass('active');
			            for (var i = 0; i < that.Category.length; i++) {
			              	  that.Category[i].selected=false;
			             }
			            if(res.code==1){
			            	if(that.getStr(res).length<1){
			            		that.isend=1;
			            	}
			            	that.list=that.getStr(res);
			            	// for (var i = 0; i < that.getStr(res).length; i++) {
			            	// 	that.list.push(that.getStr(res)[i]);
			            	// }
			              
			            }else{
			            	showLayer(res.message);
			            }
                        
			        });
			    },
			    getCategory:function(){
			    	var that=this;
			        ajaxFun("POST","/get_category_list",{
			        	unionid:this.unionid
				      	
			      	},function(data){
			            var res=data;
			            if(res.code==1){
			              that.Category=res.data.list;
			              for (var i = 0; i < that.Category.length; i++) {
			              	  that.Category[i].selected=false;
			              }
			              
			            }else{
			            	showLayer(res.message);
			            }
                        
			        });
			    },
			    getCategoryList:function(id,index){
			    	var that=this;
			        ajaxFun("POST","/get_question_by_category",{
			        	unionid:this.unionid,
			        	category_id:id,
			            from:0,
			            length:30
				      	
			      	},function(data){
			            var res=data;
			            if(res.code==1){
			            $(".nav li").eq(1).removeClass('active');
			            $(".nav li").eq(0).removeClass('active');
			            that.list=that.getStr(res);
			              for (var i = 0; i < that.Category.length; i++) {
			              	  that.Category[i].selected=false;
			              }
			              that.Category[index].selected=true;
		
			            }else{
			              showLayer(res.message);
			            }
                        
			        });
			    },
			    getPartList:function(){
			    	var that=this;
			        ajaxFun("POST","/get_question_participate",{
			        	unionid:this.unionid,
			            from:0,
			            length:30
				      	
			      	},function(data){
			            var res=data;
			            if(res.code==1){
			            $(".nav li").eq(1).addClass('active');
			            $(".nav li").eq(0).removeClass('active');
			            for (var i = 0; i < that.Category.length; i++) {
			              	  that.Category[i].selected=false;
			            }
			            that.list=that.getStr(res);
			            }else{
			              showLayer(res.message);
			            }
                        
			        });
			    }



			}
		})
	</script>
</body>
</html>